// 主题色彩变量
:root {
  // 主色调 - 蓝色系
  --primary-color: #409eff;
  --primary-light: #79bbff;
  --primary-lighter: #a0cfff;
  --primary-extra-light: #d9ecff;
  --primary-dark: #337ecc;
  --primary-darker: #2b73b3;

  // 辅助色
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;

  // 中性色
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;
  --text-disabled: #c0c4cc;

  // 边框色
  --border-base: #dcdfe6;
  --border-light: #e4e7ed;
  --border-lighter: #ebeef5;
  --border-extra-light: #f2f6fc;

  // 背景色
  --bg-color: #ffffff;
  --bg-color-page: #f2f3f5;
  --bg-color-overlay: #ffffff;

  // 阴影
  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

// 暗色主题
[data-theme='dark'] {
  --text-primary: #ffffff;
  --text-regular: #e5eaf3;
  --text-secondary: #cfd3dc;
  --text-placeholder: #8d9095;
  --text-disabled: #6c6e72;

  --border-base: #4c4d4f;
  --border-light: #414243;
  --border-lighter: #363637;
  --border-extra-light: #2b2b2c;

  --bg-color: #1d1e1f;
  --bg-color-page: #0a0a0a;
  --bg-color-overlay: #1d1e1f;

  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.2);
  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.3);
  --box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}

// 动画变量
:root {
  --transition-duration: 0.3s;
  --transition-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}

// 布局变量
:root {
  --header-height: 60px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --content-padding: 20px;
}